<template>
    <wing-blank class="home-menus">
        <van-grid :column-num="5" :border="false" icon-size="46px">
            <van-grid-item v-for="menu in menus"
                           :key="menu.id" :icon="menu.icon" :text="menu.name"
                           @click.stop="handleRouteToUrl(menu)"/>
        </van-grid>
    </wing-blank>
</template>

<script>
  import WingBlank from "@/components/WingBlank"
  import { Grid, GridItem } from "vant"
  import { app } from "@mall/api-services"

  export default {
    name: "HomeMenus",
    components: {
      WingBlank,
      [Grid.name]: Grid,
      [GridItem.name]: GridItem,
    },
    data() {
      return {
        menus: [],
      }
    },
    created() {
      this.refreshMenus()
    },
    methods: {
      refreshMenus() {
        app.MenuService.getMenu("1")
          .then(menu => menu.children)
          .then(menus => this.menus = menus)
      },
      handleRouteToUrl(menu) {
        if (menu.url) {
          this.$router.push(menu.url)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
    .home-menus {
        background: #fff;
        border-radius: 10px;

        ::v-deep .van-grid-item__content {
            background: initial;
            padding: 8px;
        }
    }

</style>
